<template>
    <a-layout id="home-layout">
        <a-layout-header class="header">
            <div class="logo">
                <img :src="logo" object-fit="cover">
            </div>
            <div class="top-tools">
                <audio ref="audio" style="display: none;" :src="test"
                       controls="controls">
                </audio>
                <div class="player">
                    <div class="audio-player" @mouseenter="control=!control" @mouseleave="control=!control">
                        <img :src="logo1" :style="{
                                    transform:'rotatez('+rot+'deg)'
                                }"
                             class="poster" object-fit="cover">
                        <div class="title" v-show="!control">
                            <span>我曾这样寂寞生活-1我曾这样寂寞生活</span>
                            <span>只想安静坐一会</span>
                        </div>
                        <i v-show="control" class="designer-icon">&#xe607;</i>
                        <i v-show="control && !isPlay" @click="play" class="designer-icon">&#xe60b;</i>
                        <i v-show="control && isPlay" @click="pause" class="designer-icon">&#xe6d0;</i>
                        <i v-show="control" class="designer-icon">&#xe603;</i>
                    </div>
                    <progress class="audio-progress" :value="audioValue" :max="audioMax"></progress>
                </div>
                <a-dropdown :trigger="['click']">
                    <i class="designer-icon" style="cursor: pointer;
                        display: block;
                        font-size: 26px;
                        margin-right: 10px;">&#xe844;</i>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:;">歌曲1</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;">歌曲2</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;">歌曲3</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
<!--                <div style="margin-left: 20px;" @click="goLogin"><a>登录</a></div>-->
            </div>
            <a-menu
                    theme="light"
                    mode="horizontal"
                    v-model="active"
                    :style="{ lineHeight: '60px',height: '100%' }"
                    @click="menuClick"
            >
                <template v-for="menu in menus">
                    <a-menu-item v-if="!menu.meta.hidden" :key="menu.id">
                        {{menu.meta.title}}
                    </a-menu-item>
                </template>
            </a-menu>
        </a-layout-header>
        <router-view/>
    </a-layout>
</template>

<script>
import logo from '@/assets/logo.png'
import logo1 from '@/assets/logo1.png'

import a from '@/assets/我曾这样寂寞生活-1.mp3'

export default {
  name: 'HomeLayout',
  data() {
    return {
      logo: logo,
      logo1: logo1,
      test: a,
      menus: [],
      active: [0],
      isPlay: false,
      rot: 0, // 旋转
      audioMax: 100,
      audioValue: 0,
      control: false// 音乐播放器控制显示隐藏
    }
  },
  created() {
    this.menus = this.$store.getters.routers
    this.active = this.$store.getters.active
  },
  mounted() {
  },
  watch: {
    active(v) {
      this.$store.dispatch('setActive', v)
    },
    '$store.getters.active'(v) {
      this.active = v
    }
  },
  methods: {
    goLogin() {
      this.$router.push('/login/index')
    },
    /* 播放音频*/
    play() {
      this.$refs.audio.play()
      this.isPlay = !this.isPlay
      this.timer = setInterval(() => {
        this.rot++
        if (this.rot >= 360) {
          this.rot = 0
        }
        this.audioMax = this.$refs.audio.duration
        this.audioValue = this.$refs.audio.currentTime
        if (this.audioValue >= this.audioMax) {
          /* 切换下一首*/
          this.pause()
        }
      }, 50)
    },
    pause() {
      clearInterval(this.timer)
      this.$refs.audio.pause()
      this.isPlay = !this.isPlay
    },
    /* 菜单点击*/
    menuClick({ key }) {
      let menu
      const getMenu = array => {
        array.forEach(v => {
          if (v.id === key) {
            menu = v
          }
          if (v.children) {
            getMenu(v.children)
          }
        })
      }
      getMenu(this.menus)
      if (this.active[0] !== key) {
        this.$router.push(menu.path)
      }
    }
  }
}
</script>

<style scoped lang="less">
    #home-layout {
        height: 100%;
        background: url('~@/assets/background.jpg') center center no-repeat;
        .logo {
            width: 120px;
            margin-right: 70px;
            float: left;
            color: #ffffff;

            img {
                width: 100%;
            }
        }

        .header {
            background-color: #ffffff;
            /*margin-bottom: 10px;*/
            padding: 0px 50px 0px 38px;
        }

        .top-tools {
            float: right;
            height: 63px;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .player {
                position: relative;
                margin-right: 10px;
                width: 200px;
                height: 60px;

                & progress {
                    -webkit-appearance: none;
                }

                & ::-webkit-progress-inner-element {
                }

                & ::-webkit-progress-bar {
                    /*border: 1px solid red; */
                    border: unset;
                }

                & ::-webkit-progress-value {
                    background: red;
                }

                & ::-moz-progress-bar {
                    background: #34538b;
                }

                & ::-ms-fill {
                    background: #34538b;
                }

                .audio-progress {
                    position: absolute;
                    bottom: 4px;
                    left: 50px;
                    width: 150px;
                    height: 3px;
                }

                .audio-player {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .poster {
                        display: block;
                        width: 50px;
                        height: 50px;
                        margin-right: 10px;
                        border: 1px solid #999999;
                        border-radius: 50%;
                    }

                    .title {
                        margin-right: 10px;

                        span {
                            display: block;
                            overflow: hidden;
                            height: 20px;
                            line-height: 20px;
                        }

                        span:first-child {
                            font-size: 14px;
                        }

                        span:last-child {
                            font-size: 10px;
                        }
                    }

                    i {
                        cursor: pointer;
                        display: block;
                        font-size: 26px;
                        margin-right: 22px;
                    }
                }
            }

        }
    }
</style>
